<template>
  <a-layout>
    <drawer v-if="isMobile" :openDrawer="collapsed" @change="onDrawerChange">
      <sider-menu
        :theme="theme"
        :menuData="menuData"
        :collapsed="false"
        :collapsible="false"
        @menuSelect="onMenuSelect"
      />
    </drawer>
    <sider-menu
      :theme="theme"
      v-else-if="layout === 'side'"
      :menuData="menuData"
      :collapsed="collapsed"
      :collapsible="true"
    />
    <!-- <drawer :open-drawer="settingBar" placement="right">
      <setting />
    </drawer> -->
    <a-layout :style="{ paddingLeft: paddingLeft }">
      <global-header :menuData="menuData" :collapsed="collapsed" @toggleCollapse="toggleCollapse" />
      <!-- class: fixed-header-content 容器最小高度在此定义。 min-height -->
      <!-- <a-layout-content
        :style="{ minHeight: minHeight, margin: '20px 14px 0', width: '100%' }"
        :class="fixHeader ? 'fixed-header-content' : null"
      > -->
      <a-layout-content
        :style="{ margin: '20px 14px 0', width: '100%' }"
        :class="fixHeader ? 'fixed-header-content' : null"
      >
        <slot></slot>
      </a-layout-content>
      <a-layout-footer style="padding: .29rem 0" class="copyright">
        <global-footer :copyright="copyright" />
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>

<script>
import GlobalHeader from './GlobalHeader';
import GlobalFooter from './GlobalFooter';
import Drawer from '~/tool/Drawer';
import { notification } from 'ant-design-vue';
import SiderMenu from '~/menu/SiderMenu';
// import Setting from '~/setting/Setting';
import { mapState, mapMutations } from 'vuex';
import { triggerWindowResizeEvent } from 'utils/common';

const minHeight = window.innerHeight - 64 - 24 - 66;

let menuData = [];

export default {
  name: 'GlobalLayout',
  components: { SiderMenu, Drawer, GlobalFooter, GlobalHeader },
  data() {
    return {
      fixHeaderWidth: window.screen.width - (190 / 1366) * window.screen.width + 'px',
      /**
       * @desc: class: fixed-header-content 容器最小高度在此定义 min-height
       * @date 2020年7月24日15:00:22 注释
       * @author: youzi
       */
      // minHeight: minHeight + 'px',
      collapsed: false,
      menuData: menuData
    };
  },
  computed: {
    paddingLeft() {
      return this.fixSiderbar && this.layout === 'side' && !this.isMobile
        ? `${this.sidebarOpened ? (190 / 1366) * window.screen.width : 80}px`
        : '0';
    },
    ...mapState({
      sidebarOpened: state => state.setting.sidebar.opened,
      isMobile: state => state.setting.isMobile,
      theme: state => state.setting.theme,
      layout: state => state.setting.layout,
      copyright: state => state.setting.copyright,
      fixSiderbar: state => state.setting.fixSiderbar,
      fixHeader: state => state.setting.fixHeader,
      settingBar: state => state.setting.settingBar.opened
    })
  },
  methods: {
    ...mapMutations({ setSidebar: 'setting/setSidebar' }),
    toggleCollapse() {
      this.collapsed = !this.collapsed;
      this.setSidebar(!this.collapsed);
      triggerWindowResizeEvent();
    },
    onDrawerChange(show) {
      this.collapsed = show;
    },
    onMenuSelect() {
      this.toggleCollapse();
    }
  },
  async beforeCreate() {
    var routers = this.$db.get('USER_ROUTER', null);
    // debugger;
    /**
     * @desc: 极端情况下，routers可能没有获取到值，重返首页重新登录
     * @author: youzi
     */
    if (!routers) {
      this.$router.push('/login');
      notification.error({
        message: '系统提示',
        description: '未获取到登录信息，请尝试重新登录',
        duration: 4
      });
      return;
    }
    var isDelete = false;
    for (var i = 0; i < routers.length; i++) {
      var router = routers[i];
      var routerChildren = router.children ? router.children : [];
      for (var j = 0; j < routerChildren.length; j++) {
        var routerChildrenItem = routerChildren[j];
        if (routerChildrenItem.path == "/purchase-mngt") {
          var items = routerChildrenItem.children ? routerChildrenItem.children : [];
          for (var m = 0; m < items.length; m++) {
            var item = items[m];
            if (item.path == "/purchase-mngt/invoice-standing-book") {
              // 删掉
              items.splice(m, 1);
              isDelete = true;
              break;
            }
          }
          if (isDelete) {
            break;
          }
        }
        if (isDelete) {
          break;
        }
      }
    }
    menuData = routers
      .find(item => item.path === '/')
      .children.filter(menu => {
        let meta = menu.meta;
        if (typeof meta.isShow === 'undefined') {
          return true;
        } else {
          return meta.isShow;
        }
      });
  }
};
</script>

<style lang="less" scoped>
@baseFontSize: 16;
.setting {
  background-color: #1890ff;
  color: #fff;
  border-radius: 5px 0 0 5px;
  line-height: 40px;
  font-size: 22px;
  width: 40px;
  height: 40px;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
}
.fixed-header-content {
  // display: table;
  // height: 100%;
  margin: 76px 12px 0 !important;
  margin-top: ((54 + 10) / @baseFontSize) * 1rem !important;
}
</style>
